<script setup>
import {appMainBarChange} from '@/utils/provideKey'
import {ipc} from "@/utils/ipcRenderer"
import {ipcApiRoute} from "@/api/main"
import {useLocale} from '@/utils/useLocale'
import {useGlobalConf} from '@/utils/useGlobalConf'
const {globalConf} = useGlobalConf()
const $authI18n = useLocale('auth')
const $router = useRouter()
const changeMainbarHandler = inject(appMainBarChange)
//更改标题栏
changeMainbarHandler(options => {
  options.logoShow = false
  options.refreshShow = false
  options.settingShow = false
  options.notifyShow = false
  options.accountShow = false
})
//语言设置
const langSampleOptions = {'zh-CN': '简体中文', 'en-US': 'English'}
const langOptions = [{label: '简体中文', value: 'zh-CN'}, {label: 'English', value: 'en-US'}]
const changeLanguage = (value) => {
  ipc.send(ipcApiRoute['home.saveAndSync'], {
    appLanguageI18n: value || 'zh-CN'
  })
}
//登录表单
const LoginFormRef = ref(null)
const loginFormModel = ref({
  //账号
  username: null,
  //密码
  password: null
})
const loginFormRules = {
  username: [
    {
      required: true,
      renderMessage: () => {
        return $authI18n.value.usernameRequired
      },
      trigger: ['input', 'blur']
    }
  ],
  password: [
    {
      required: true,
      renderMessage: () => {
        return $authI18n.value.passwordRequired
      },
      trigger: ['input', 'blur']
    }
  ]
}
const loginLoading = ref(false)
const handleSubmit = (evt) => {
  evt.preventDefault()
  LoginFormRef.value?.validate((error) => {
    if (error) {
      return
    }
    loginLoading.value = true
    // console.log( JSON.stringify(loginFormModel.value) );
    setTimeout(() => {
      loginLoading.value = false
      nextTick().then(() => {
        $router.push('/')
      })
    }, 1000)
  })
}
</script>

<template>
  <!--背景-->
  <div class="login-bg">
    <div
        style="position:absolute;width:480px;height:480px;border:1px solid var(--ui-border-color-base);opacity:.7;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:580px;height:580px;border:1px solid var(--ui-border-color-base);opacity:.6;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:680px;height:680px;border:1px solid var(--ui-border-color-base);opacity:.5;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:780px;height:780px;border:1px solid var(--ui-border-color-base);opacity:.4;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:880px;height:880px;border:1px solid var(--ui-border-color-base);opacity:.3;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:980px;height:980px;border:1px solid var(--ui-border-color-base);opacity:.2;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
    <div
        style="position:absolute;width:980px;height:980px;border:1px solid var(--ui-border-color-base);opacity:.1;left:50%;transform:translateX(-50%);border-radius:50%;"></div>
  </div>
  <!--内容块-->
  <div class="login">
    <!--LOGO-->
    <div class="logo">
      <img src="@/assets/logo.png" alt="Logo">
      <span class="logo--title">EE框架3.9.0</span>
    </div>
    <!--表单-->
    <n-card>
      <template #header>
        <n-thing>
          <template #header>
            <div class="titlebar">{{ $authI18n.signIn }}</div>
          </template>
        </n-thing>
      </template>
      <template #default>
        <n-form

            ref="LoginFormRef"
            :model="loginFormModel"
            :rules="loginFormRules"
            label-placement="left">
          <n-form-item path="username"
                       :show-label="false"
                       :label="$authI18n.username">
            <n-input type="text" v-model:value="loginFormModel.username" size="large" :placeholder="$authI18n.username"
                     round/>
          </n-form-item>
          <n-form-item path="password"
                       :show-label="false"
                       :label="$authI18n.password"
                       :style="{marginTop: '6px'}">
            <n-input type="password"
                     v-model:value="loginFormModel.password"
                     size="large"
                     show-password-on="mousedown"
                     :placeholder="$authI18n.password"
                     round>
            </n-input>
          </n-form-item>
          <n-space vertical>
            <n-button class="login-btn"
                      size="large"
                      type="primary"
                      attr-type="submit"
                      @click="handleSubmit"
                      :loading="loginLoading"
                      round>
              {{ $authI18n.signIn }}
            </n-button>
          </n-space>
        </n-form>

      </template>
    </n-card>
    <div class="footer">
      <n-space>
        <!-- 语言 -->
        <div class="language">
          <n-popselect v-model:value="globalConf.appLanguageI18n"
                       :options="langOptions"
                       @update:value="changeLanguage"
                       trigger="click">
            <n-button text>
              <template #icon>
                <n-icon size="16">
                  <icon-mm-language/>
                </n-icon>
              </template>
              <span>{{ langSampleOptions[globalConf.appLanguageI18n] }}</span>
              <n-icon size="13" style="margin-left:3px;">
                <icon-ep-arrowDown/>
              </n-icon>
            </n-button>
          </n-popselect>
        </div>
      </n-space>
    </div>
  </div>
</template>

<style scoped lang="less">
.login-bg {
  width: 100%;
  position: absolute;
  z-index: -1;
  top: var(--common-navbar-height);
  bottom: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.login {
  width: 100%;
  min-width: 800px;
  position: absolute;
  z-index: 2;
  top: var(--common-navbar-height);
  bottom: 0;

  .logo {
    width: fit-content;
    padding: 24px 48px;
    display: flex;
    align-items: center;

    img {
      height: 42px;
    }

    &--title {
      padding: 0 6px;
      font-size: 18px;
      font-weight: 700;
      color: var(--text-color-1);
    }
  }

  .n-card {
    padding: 32px 16px;
    box-shadow: var(--box-shadow-3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 440px;
    height: fit-content;
    border-radius: 24px;

    .titlebar {
      font-size: 22px;
      font-weight: 100;
    }

    .login-btn {
      width: 100% !important;
      margin-top: 12px;
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;

    padding: 18px 32px;

    .language {
      display: flex;
      align-items: center;
    }
  }

}

//end
</style>